<template>
  <div>
    <div class="icons">
      <download color="#fff" @click="downLoad" />
    </div>
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
      <nut-swiper-item v-for="item in list" :key="item">
        <img :src="item" mode="aspectFit" alt="" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Download } from '@nutui/icons-vue-taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { getTaoBaoqQRCodeONApp } from '../../../../api/index'
export default {
  components: {
    Download
  },
  setup() {
    const state = reactive({
      page: 2,
      list: [],
      data: {},
      goodsId: '',
    });
    onMounted(() => {
      mitt.on("detail", (val) => {
        state.list = val.goodsCarouselList
        state.data = val
      })
    });
    const downLoad = () => {
      getTaoBaoqQRCodeONApp({
        goodsId: state.data.goodsId,
        goodsCoverImg: state.data.goodsCoverImg,
        originalPrice: state.data.originalPrice,
        sellingPrice: state.data.sellingPrice,
        goodsName: state.data.goodsName,
      }).then(res => {
        Taro.downloadFile({
          url: res,
          success: function (res) {
            if (res.statusCode === 200) {
              Taro.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (res) {
                  Taro.showToast({
                    title: '已保存到相册',
                    icon: 'success',
                    duration: 2000
                  })
                }
              })
            }
          }
        })
      })
    }
    return { ...toRefs(state), downLoad };
  }
};
</script>
<style lang="scss" >
.nut-swiper-item {
  line-height: 400px;

  img {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}

.icons {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50rpx;
  z-index: 999;
  text-align: right;
  margin-top: 10rpx;

  .nut-icon {
    padding: 10rpx;
    border-radius: 50%;
    background: rgba($color: #000000, $alpha: 0.1);
    margin-right: 20rpx;
  }
}
</style>